<!-- 消息详情 -->

<script setup>
import { ref, toRaw, watch, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Document, Delete, Picture, VideoPlay } from '@element-plus/icons-vue';
import {
  ElDialog,
  ElForm,
  ElButton,
  ElFormItem,
  ElInput,
  ElMessage,
  ElIcon,
  ElRow,
  ElCol,
  ElUpload,
  ElImage,
} from 'element-plus';
import { storeToRefs } from 'pinia';
import { eventHandle, eventResult, getEventTypeDetail } from '@/apis/api-event';
import { fireDel, fireUpload } from '@/apis/api-fire';
import { BASE_FILE_PATH } from '@/apis/index';
import { handleDownload, UPLOAD_FILE_TYPE_PHOTO, UPLOAD_FILE_TYPE_VIDEO } from '@/common/common-helper';
import useStore from '@/stores';

const { storeUser, stompJsStore } = useStore();

const { businessMap } = storeToRefs(storeUser);

const props = defineProps({
  detailXShowDialog: {
    type: Boolean,
  },
  detailLookInfo: Object,
});
const { detailXShowDialog, detailLookInfo } = toRefs(props);
const emit = defineEmits(['closeDetailDialog']);
const router = useRouter();
const route = useRoute();
const disposeValue = ref({});
const eventResultValue = ref();
const initialIndexImage = ref(0);
const srcList = ref([]);
const videoVisible = ref(false);
const videoLookItem = ref({});
const eventResultSrcList = ref([]);

const closeDetailDialog = () => {
  emit('closeDetailDialog');
};

const getVideoFirstFrame = (videoUrl) => {
  return new Promise(function (resolve) {
    let dataURL = '';
    let video = document.createElement('video');

    video.setAttribute('crossorigin', 'anonymous'); //处理跨域
    video.setAttribute('src', videoUrl);
    video.setAttribute('width', 400);
    video.setAttribute('height', 240);
    video.setAttribute('controls', 'controls');
    video.currentTime = 7; //视频时长，一定要设置，不然大概率白屏
    video.addEventListener('loadeddata', function () {
      let canvas = document.createElement('canvas'),
        width = video.width, //canvas的尺寸和图片一样
        height = video.height;

      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(video, 0, 0, width, height); //绘制canvas
      dataURL = canvas.toDataURL('image/png'); //转换为base64

      var img = document.createElement('img');

      img.src = dataURL;
      video.setAttribute('poster', dataURL);
      resolve(dataURL);
    });
  });
};

const handleCloseVideo = () => {
  videoVisible.value = false;
  document.getElementById('maskmore_1').pause();
};

const fetchEventResult = async () => {
  const [err, data] = await eventResult(disposeValue.value.id);

  if (!err) {
    eventResultValue.value = data.data;

    eventResultSrcList.value = eventResultValue.value?.picture?.map((item) => {
      return `${BASE_FILE_PATH}${item.object}`;
    });

    // 获取视频第一帧
    eventResultValue.value?.video?.map((item) => {
      getVideoFirstFrame(`/midongqu/static/${item?.object}`)
        .then((dataUrl) => {
          item['image'] = dataUrl;
        })
        .catch((error) => {
          console.error(error); // 打印错误信息
        });
    });
  } else {
    ElMessage.error(err);
  }
};

/*
 *@description: 查询事件详情
 */
const getEventTypeDetailApi = async (id) => {
  const [err, data] = await getEventTypeDetail(id);

  if (!err) {
    if (data.data?.event == null) {
      ElMessage.warning('该事件已被删除');
      emit('closeDetailDialog');

      return;
    }

    // 获取视频第一帧
    data.data?.event?.video?.map(async (item) => {
      const dataUrl = await getVideoFirstFrame(`/midongqu/static/${item?.object}`);

      item['imgUrl'] = dataUrl;

      return item;
    });

    srcList.value = data.data?.event?.picture?.map((item) => {
      return `${BASE_FILE_PATH}${item.object}`;
    });
    setTimeout(() => {
      disposeValue.value = data.data?.event;

      if (data.data?.event?.status === 'PROCESSED') {
        fetchEventResult();
      }
    }, 500);
  }
};

watch(
  detailXShowDialog,
  (val) => {
    if (val) {
      getEventTypeDetailApi(detailLookInfo.value.subjectId ?? '');

      stompJsStore.route = route.path;
    }
  },
  { deep: true },
);

const rules = {
  suggestion: [
    {
      required: true,
      message: '请输入处理意见',
      trigger: 'blur',
    },
  ],
};
const formRef = ref(null);

const form = ref({
  suggestion: '',
});

const onPreviewImg = (i) => {
  initialIndexImage.value = i;
};

// 查看视频
const handleVideoLook = (i) => {
  videoLookItem.value = `${BASE_FILE_PATH}${i.object}`;
  videoVisible.value = true;
};

// 图片数量设置
const handleExceedPhoto = (files, fileList) => {
  ElMessage({
    message: `最多只能上传9张图片，已经选择了 ${fileList.length} 张图片`,
    type: 'warning',
  });
};

// 视频数量
const handleExceedVideo = (files, fileList) => {
  ElMessage({
    message: `最多只能上传3份视频文件,已经选择了 ${fileList.length} 份视频文件`,
    type: 'warning',
  });
};

// 附件数量
const handleExceedDoc = (files, fileList) => {
  ElMessage({
    message: `最多只能上传3份文件,已经选择了 ${fileList.length} 份文件`,
    type: 'warning',
  });
};

/**
 * @description: 下载
 * @param {*}
 * @return {*}
 */
const handleDownFile = (item) => {
  let isOk = handleDownload(`/midongqu/static/${item.object}`, item.filename);

  if (isOk) {
    ElMessage({
      type: 'success',
      message: '下载成功！',
    });
  } else {
    return ElMessage({
      type: 'error',
      message: '下载失败！',
    });
  }
};

//关闭报告事件
const handleCloseDisposeDialog = () => {
  formRef.value && formRef.value.resetFields();
  //清除照片
  photoFileList.value &&
    photoFileList.value.forEach(async (i) => {
      await handleRemove(i);
    });
  photoFileList.value = [];
  //清除视频
  videoFileList.value &&
    videoFileList.value.forEach(async (i) => {
      await handleRemoveVideo(i);
    });
  videoFileList.value = [];
  //清除文档
  docFileList.value &&
    docFileList.value.forEach(async (i) => {
      await handleRemoveDoc(i);
    });
  docFileList.value = [];
  emit('closeDetailDialog');
};

//提交报告事件
const handleSaveEvent = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const body = {
        ...form.value,
        eventId: toRaw(disposeValue.value.id),
        picture: toRaw(uploadPhotoList.value),
        video: toRaw(uploadVideoList.value),
        annex: toRaw(uploadDocList.value),
      };

      const [err, data] = await eventHandle(body);

      if (!err) {
        ElMessage.success(data && '处理成功');
        formRef.value && formRef.value.resetFields();
        //清除照片
        photoFileList.value = [];
        uploadPhotoList.value = [];
        //清除视频
        videoFileList.value = [];
        uploadVideoList.value = [];
        //清除文档
        docFileList.value = [];
        uploadDocList.value = [];
        emit('closeDetailDialog');
      } else {
        ElMessage.error(err);
      }
    }
  });
};

//图片列表
const photoFileList = ref([]);
//上传图片列表
const uploadPhotoList = ref([]);

//取消上传图片
const handleRemove = async (uploadFile) => {
  const removeItem = uploadPhotoList.value.filter((i) => i.uid === uploadFile.uid)[0];

  uploadPhotoList.value = toRaw(uploadPhotoList.value).filter((i) => i.uid != uploadFile.uid);

  const [err] = await fireDel({
    object: removeItem.object,
  });

  if (err) {
    ElMessage.error(err);
  }
};

//上传图片
const handleProgress = async (uploadFile) => {
  const state = UPLOAD_FILE_TYPE_PHOTO(uploadFile.raw);

  if (!state) {
    ElMessage({
      message: `上传图片只能是 .png, .bmp,.jpg, .jpeg格式!`,
      type: 'warning',
    });
    photoFileList.value.pop();

    return;
  }

  const [err, data] = await fireUpload({
    files: [uploadFile.raw],
  });

  if (!err) {
    uploadPhotoList.value.push({ uid: uploadFile.uid, ...data.data[0] });
  } else {
    ElMessage.error(err);
  }
};

//视频列表
const videoFileList = ref([]);
//上传视频列表
const uploadVideoList = ref([]);

//取消上传视频
const handleRemoveVideo = async (uploadFile) => {
  const removeItem = uploadVideoList.value.filter((i) => i.uid === uploadFile.uid)[0];

  videoFileList.value = videoFileList.value.filter((i) => i.uid != uploadFile.uid);
  uploadVideoList.value = toRaw(uploadVideoList.value).filter((i) => i.uid != uploadFile.uid);

  const [err] = await fireDel({
    object: removeItem.object,
  });

  if (err) {
    ElMessage.error(err);
  }
};

//上传视频
const handleProgressVideo = async (uploadFile) => {
  const state = UPLOAD_FILE_TYPE_VIDEO(uploadFile.raw);

  if (!state) {
    ElMessage({
      message: `上传视频只能是 .mp4格式!`,
      type: 'warning',
    });
    videoFileList.value.pop();

    return;
  }

  const [err, data] = await fireUpload({
    files: [uploadFile.raw],
  });

  if (!err) {
    uploadVideoList.value.push({ uid: uploadFile.uid, ...data.data[0] });
  } else {
    ElMessage.error(err);
  }
};

//文档列表
const docFileList = ref([]);
//上传文档列表
const uploadDocList = ref([]);

//取消上传文档
const handleRemoveDoc = async (uploadFile) => {
  const removeItem = uploadDocList.value.filter((i) => i.uid === uploadFile.uid)[0];

  docFileList.value = docFileList.value.filter((i) => i.uid != uploadFile.uid);
  uploadDocList.value = toRaw(uploadDocList.value).filter((i) => i.uid != uploadFile.uid);

  const [err] = await fireDel({
    object: removeItem.object,
  });

  if (err) {
    ElMessage.error(err);
  }
};

//上传文档
const handleProgressDoc = async (uploadFile) => {
  if (
    [
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/msword',
      'application/pdf',
    ].includes(uploadFile.raw.type)
  ) {
    const [err, data] = await fireUpload({
      files: [uploadFile.raw],
    });

    if (!err) {
      uploadDocList.value.push({ uid: uploadFile.uid, ...data.data[0] });
    } else {
      ElMessage.error(err);
    }
  } else {
    ElMessage({
      message: `上传文件只能是 .doc, .docx,.pdf, 格式!`,
      type: 'warning',
    });
    docFileList.value.pop();

    return;
  }
};

//提醒处理
const handleRemind = () => {
  ElMessage.success('通知成功');
  emit('closeDetailDialog');
};

const handleEventListLook = () => {
  closeDetailDialog();
  // router.push({
  //   path: '/one-map',
  //   query: {
  //     value: '事件管理',
  //   },
  // });

  if (stompJsStore.getRoute != '/one-map') {
    router.push({ name: 'OneMap' });
  } else {
    //当前路径是一张图，清空route状态
    stompJsStore.route = '';
  }
};
</script>
<template>
  <div class="detail_root">
    <ElDialog
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      top="115px"
      :model-value="detailXShowDialog"
      :show-close="false"
    >
      <template #header>
        <div class="header_c">
          <div class="title_">查看消息</div>
          <div>
            <span @click="handleEventListLook()">事件列表</span>
            <span @click="closeDetailDialog()">X</span>
          </div>
        </div>
      </template>
      <ElRow>
        <ElCol :span="11" class="dispose_left">
          <div class="dispose_header">事件信息</div>
          <ElRow class="dispose_content" align="middle">
            <ElCol :span="5" class="dispose_content_left"> 事件类型:</ElCol>
            <ElCol :span="18">{{ disposeValue.typeName == null ? '--' : disposeValue.typeName }}</ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 内容:</ElCol>
            <ElCol :span="18">{{ disposeValue.content == null ? '--' : disposeValue.content }}</ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 事件来源:</ElCol>
            <ElCol :span="18">{{
              disposeValue.source == null ? '--' : disposeValue.source == 'USER' ? '人工上报' : '设备上报'
            }}</ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 上报人:</ElCol>
            <ElCol :span="18">{{ disposeValue.creatorName == null ? '--' : disposeValue.creatorName }}</ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 上报时间:</ElCol>
            <ElCol :span="18">{{ disposeValue.createdDate == null ? '--' : disposeValue.createdDate }}</ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 联系电话:</ElCol>
            <ElCol :span="18">{{ disposeValue.creatorMobile == null ? '--' : disposeValue.creatorMobile }}</ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 照片:</ElCol>
            <ElCol :span="18">
              <ElImage
                v-for="(ite, index) in disposeValue.picture"
                :key="index"
                class="img"
                :infinite="false"
                :src="`${BASE_FILE_PATH}${ite.object}`"
                :zoom-rate="1.2"
                :initial-index="initialIndexImage"
                :preview-src-list="srcList"
                fit="cover"
                hide-on-click-modal
                @show="onPreviewImg(index)"
              />
            </ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 视频:</ElCol>
            <ElCol :span="18">
              <div
                v-for="i in disposeValue.video"
                :key="i.object"
                class="dispose_video"
                :title="i.filename"
                @click="handleVideoLook(i)"
              >
                <p class="video_list">
                  <img :src="i?.imgUrl" />
                  <span>{{ i?.filename }}</span>
                </p>
                <!-- <div id="result"></div> -->
              </div>
            </ElCol>
          </ElRow>
          <ElRow class="dispose_content">
            <ElCol :span="5" class="dispose_content_left"> 文件/附件:</ElCol>
            <div class="dispose_video">
              <p
                v-for="i in disposeValue.annex"
                :key="i.object"
                :title="i.filename"
                class="p_style"
                @click="handleDownFile(i)"
              >
                <span>{{ i.filename }}</span>
              </p>
            </div>
          </ElRow>
        </ElCol>
        <ElCol :span="2" align="center">
          <div class="dispose_line"></div>
        </ElCol>
        <ElCol :span="11" class="handleEvent">
          <div class="dispose_header">处理事件</div>
          <div v-if="disposeValue.status === 'PROCESSED'" class="dispose_result">
            <ElRow class="dispose_content">
              <ElCol :span="5" class="dispose_content_left"> 处理意见:</ElCol>
              <ElCol :span="18">{{ eventResultValue && eventResultValue.suggestion }}</ElCol>
            </ElRow>
            <ElRow class="dispose_content">
              <ElCol :span="5" class="dispose_content_left"> 处理人:</ElCol>
              <ElCol :span="18">{{ eventResultValue && eventResultValue.creatorName }}</ElCol>
            </ElRow>
            <ElRow class="dispose_content">
              <ElCol :span="5" class="dispose_content_left"> 联系电话:</ElCol>
              <ElCol :span="18">{{ eventResultValue && eventResultValue.creatorMobile }}</ElCol>
            </ElRow>
            <ElRow class="dispose_content">
              <ElCol :span="5" class="dispose_content_left"> 处理时间:</ElCol>
              <ElCol :span="18">{{ eventResultValue && eventResultValue.createdDate }}</ElCol>
            </ElRow>
            <ElRow class="dispose_content">
              <ElCol :span="5" class="dispose_content_left"> 照片:</ElCol>
              <ElCol :span="18">
                <ElImage
                  v-for="i in eventResultValue && eventResultValue.picture"
                  :key="i.object"
                  class="img"
                  :infinite="false"
                  :src="`${BASE_FILE_PATH}${i.object}`"
                  :zoom-rate="1.2"
                  :initial-index="initialIndexImage"
                  :preview-src-list="eventResultSrcList"
                  fit="cover"
                  hide-on-click-modal
                  @show="onPreviewImg(index)"
                />
              </ElCol>
            </ElRow>
            <ElRow class="dispose_content">
              <ElCol :span="5" class="dispose_content_left"> 视频:</ElCol>
              <ElCol :span="18">
                <!-- <div class="dispose_video">
                  <p
                    v-for="i in eventResultValue && eventResultValue.video"
                    :key="i.object"
                    :title="i.filename"
                    class="p_style"
                    @click="handleVideoLook(i)"
                  >
                    <span>{{ i.filename }}</span>
                  </p>
                </div> -->

                <div
                  v-for="i in eventResultValue && eventResultValue.video"
                  :key="i.object"
                  class="dispose_video"
                  :title="i.filename"
                  @click="handleVideoLook(i)"
                >
                  <p class="video_list">
                    <img :src="i?.image" />
                    <span>{{ i?.filename }}</span>
                  </p>
                  <!-- <div id="result"></div> -->
                </div>
              </ElCol>
            </ElRow>
            <ElRow class="dispose_content">
              <ElCol :span="5" class="dispose_content_left"> 文件/附件:</ElCol>
              <ElCol :span="18">
                <div class="dispose_video">
                  <p
                    v-for="i in eventResultValue && eventResultValue.annex"
                    :key="i.object"
                    :title="i.filename"
                    class="p_style"
                    @click="handleDownFile(i)"
                  >
                    <span>{{ i.filename }}</span>
                  </p>
                </div>
              </ElCol>
            </ElRow>
          </div>
          <ElForm v-else-if="businessMap['巡护事件处理']" ref="formRef" :model="form" :rules="rules">
            <ElFormItem label="处理意见:" prop="suggestion">
              <ElInput
                v-model="form.suggestion"
                autocomplete="off"
                placeholder="请输入处理意见"
                type="textarea"
                maxlength="500"
                show-word-limit
              />
            </ElFormItem>
            <ElFormItem label="照片:" class="style_label">
              <ElUpload
                v-model:file-list="photoFileList"
                list-type="picture-card"
                :auto-upload="false"
                :on-remove="handleRemove"
                :on-change="handleProgress"
                :on-exceed="handleExceedPhoto"
                limit="9"
                accept=".png,.bmp,.jpg,.jpeg"
              >
                <ElIcon><Picture /></ElIcon>
                <template #tip>
                  <div class="el-upload__tip">上传图片只能是 .png, .bmp, .jpg, .jpeg格式!</div>
                </template>
              </ElUpload>
            </ElFormItem>
            <ElFormItem label="视频:" class="style_label">
              <ElUpload
                v-model:file-list="videoFileList"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleProgressVideo"
                :on-exceed="handleExceedVideo"
                limit="3"
                accept=".mp4"
              >
                <ElIcon><VideoPlay /></ElIcon>
                <template #file="{ file }">
                  <div class="video">
                    <div class="video_title">{{ file.name }}</div>
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-delete" @click="handleRemoveVideo(file)">
                        <ElIcon><Delete /></ElIcon>
                      </span>
                    </span>
                  </div>
                </template>
                <template #tip>
                  <div class="el-upload__tip">上传视频只能是 .mp4格式!</div>
                </template>
              </ElUpload>
            </ElFormItem>
            <ElFormItem label="文档附件:" class="style_label_">
              <ElUpload
                v-model:file-list="docFileList"
                list-type="picture-card"
                :auto-upload="false"
                :on-change="handleProgressDoc"
                :on-exceed="handleExceedDoc"
                limit="3"
                accept=".doc,.docx,.pdf"
              >
                <ElIcon><Document /></ElIcon>
                <template #file="{ file }">
                  <div class="video">
                    <div class="video_title">{{ file.name }}</div>
                    <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-delete" @click="handleRemoveDoc(file)">
                        <ElIcon><Delete /></ElIcon>
                      </span>
                    </span>
                  </div>
                </template>
                <template #tip>
                  <div class="el-upload__tip">上传文档只能是 .doc, .docx, .pdf格式!</div>
                </template>
              </ElUpload>
            </ElFormItem>
          </ElForm>
          <div v-else class="noHandle">暂未处理(没有处理权限)</div>
        </ElCol>
      </ElRow>
      <template #footer>
        <span v-if="disposeValue.status === 'PROCESSED'"></span>
        <span v-else-if="businessMap['巡护事件处理']" class="dialog-footer">
          <ElButton @click="handleCloseDisposeDialog">取消</ElButton>
          <ElButton type="primary" @click="handleSaveEvent">确定</ElButton>
        </span>
        <span v-else class="dialog-footer">
          <ElButton color="transparent" @click="handleRemind">提醒处理</ElButton>
        </span>
      </template>
    </ElDialog>
  </div>

  <ElDialog
    :model-value="videoVisible"
    :close-on-click-modal="false"
    align-center
    @close="
      () => {
        handleCloseVideo();
      }
    "
  >
    <main class="main_video">
      <video id="maskmore_1" :src="videoLookItem" controls="controls" autoplay class="event_video"></video>
    </main>
  </ElDialog>
</template>

<style scoped lang="scss">
.header_c {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title_ {
    color: #333333;
    font-size: 18px;
  }
  span:first-child {
    margin-right: 32px;
    color: #377bf0;
    font-size: 18px;
    cursor: pointer;
  }
  span:nth-child(2) {
    color: #666666;
    font-size: 18px;
    cursor: pointer;
  }
}
.detail_root {
  :deep(.el-dialog) {
    width: 900px;
    border-radius: 10px;
  }
}
:deep(.el-dialog .el-dialog__header) {
  color: #565656;
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid #f8f8f8;
}

:deep(.el-textarea) {
  width: 95%;
  .el-textarea__inner {
    min-height: 150px !important;
    color: #333333;
    background: rgba(255, 255, 255, 0.1);
  }
}

:deep(.el-radio) {
  color: #333333;
}
.el-upload-list__item-delete {
  margin: 0 !important;
}
:deep(.el-icon--zoom-in) {
  display: none;
}
:deep(.el-upload) {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
}
:deep(.el-upload-list__item) {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
}

.main_video {
  display: flex;
  justify-content: center;
}
.event_video {
  width: 900px;
  height: 800px;
}
.dispose_left {
  display: flex;
  flex-direction: column;
  gap: 15px;
  height: 600px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }
}
.dispose_line {
  width: 1px;
  height: 100%;
  background-color: #e8e8e8;
}
.dispose_header {
  margin: 0 0 15px 15px;
  color: #333333;
  font-size: 16px;
}
.handleEvent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 600px;
  overflow-y: auto;

  .style_label {
    margin-left: 35px;
  }
  .style_label_ {
    margin-left: 5px;
  }
  &::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }
  .noHandle {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    color: #333333;
  }
  .dispose_result {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
  }
}
.dispose_content {
  color: #333333;
  font-size: 16px;
  .dispose_content_left {
    margin-right: 10px;
    color: #666666;
    text-align: right;
  }

  .dispose_video {
    display: flex;
    flex-direction: column;
    img {
      width: 43px;
      height: 43px;
      border-radius: 4px;
    }

    .video_list {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 5px;
      cursor: pointer;

      span {
        display: inline-block;
        width: 280px;
        margin-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .p_style {
      width: 280px;
      margin-bottom: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
      &:hover {
        color: #9fc2ff;
      }
    }
  }
}
.el-upload__tip {
  color: #333333;
}
.video {
  width: 100px;
  height: 100px;
  .video_title {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #333333;
    font-size: 12px;
    line-height: 1;
    text-overflow: ellipsis;
    word-break: break-all;
  }
}

:deep(.el-image) {
  width: 50px;
  height: 50px;
  margin-left: 5px;
  border-radius: 4px;
}
:deep(.el-textarea .el-input__count) {
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
